<template>
  <q-toolbar class="min-h-[40px]">
    <div class="flex items-center" @click="router.push({ path: '/' })">
      <q-avatar size="lg">
        <img :src="$a_config.appLogo" />
      </q-avatar>
      <q-toolbar-title shrink class="text-bold text-italic cursor-pointer" style="padding: 0 5px;">
        {{ $a_config.appName }}
      </q-toolbar-title>
    </div>

    <q-separator vertical inset spaced />
    <el-breadcrumb v-show="!isMobile" v-if="config.side_mode !== 'head' && config.side_mode !== 'combination'"
      class="ml-4">
      <el-breadcrumb-item v-for="item in matched.slice(1, matched.length)" :key="item.path">
        {{
          fmtTitle(item.meta.title, route)
        }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <q-space />

    <div class="q-gutter-sm row items-center no-wrap">
      <tools />
      <el-dropdown>
        <div class="flex justify-center items-center h-full w-full">
          <span class="cursor-pointer flex justify-center items-center text-black dark:text-gray-100">
            <CustomPic />
            <span v-show="!isMobile" class="w-16">{{ userStore.userInfo.nickName }}</span>
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <span class="font-bold">
                当前角色：{{
                  userStore.userInfo.authority.authorityName
                }}
              </span>
            </el-dropdown-item>
            <template v-if="userStore.userInfo.authorities">
              <el-dropdown-item v-for="item in userStore.userInfo.authorities.filter(
                (i) =>
                  i.authorityId !==
                  userStore.userInfo.authorityId
              )" :key="item.authorityId" @click="changeUserAuth(item.authorityId)">
                <span>
                  切换为：{{ item.authorityName }}
                </span>
              </el-dropdown-item>
            </template>
            <el-dropdown-item icon="avatar" @click="toPerson">
              个人信息
            </el-dropdown-item>
            <el-dropdown-item icon="reading-lamp" @click="userStore.LoginOut">
              登 出
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </q-toolbar>
</template>

<script setup>
import tools from "./tools.vue"
import CustomPic from '@/components/customPic/index.vue'
import { useUserStore } from "@/stores/use_user_store";
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from "@/stores"
import { storeToRefs } from "pinia"
import { computed, } from 'vue'
import { setUserAuthority } from '@/api/user'
import { fmtTitle } from "@/utils/fmtRouterTitle";
import gvaAside from "@/layouts/aside/index.vue"
const userStore = useUserStore();
const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const { device, config } = storeToRefs(appStore)
const isMobile = computed(() => {
  return device.value === 'mobile'
})
const toPerson = () => {
  router.push({ name: "person" });
};
const matched = computed(() => route.meta.matched);


const changeUserAuth = async (id) => {
  const res = await setUserAuthority({
    authorityId: id,
  });
  if (res.code === 0) {
    window.sessionStorage.setItem("needCloseAll", "true");
    window.sessionStorage.setItem("needToHome", "true");
    window.location.reload();
  }
};


</script>

<style scoped lang="scss"></style>
